<template>
    <div id="container"></div>
</template>
  
<script>
    import AMapLoader from '@amap/amap-jsapi-loader'
    window._AMapSecurityConfig = {
        securityJsCode: '14162c04f12bcb7a4032b2b37bddea55'
    }
  export default {
    data() {
      return {
        map: null,
        geocoder:null,
        // 120.213971,30.33931 //同协金座的经纬度
      }
    },
    mounted() {
        //DOM初始化完成进行地图初始化
        this.$nextTick(()=>{
            this.initMap()
        })
        
    },
    methods: {
        initMap() {
            let that = this;
            var mapOpts = {
                showIndoorMap: false, // 是否在有矢量底图的时候自动展示室内地图，PC默认true,移动端默认false
                dragEnable: false, // 地图是否可通过鼠标拖拽平移，默认为true
                keyboardEnable: false, //地图是否可通过键盘控制，默认为true
                doubleClickZoom: false, // 地图是否可通过双击鼠标放大地图，默认为true
                zoomEnable: false, //地图是否可缩放，默认值为true
                rotateEnable: false, // 地图是否可旋转，3D视图默认为true，2D视图默认false
            }

            AMapLoader.load({

                key: '547c90989467524427ac3d6c4ba67560', // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                // zoomEnable:false,
                // dragEnable: false,
                plugins: ["AMap.Scale",'AMap.Geocoder', 'AMap.Geolocation'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等

            }).then(AMap => {

                this.map = new AMap.Map('container', {
                    //设置地图容器id
                    viewMode: '3D', //是否为3D地图模式
                    zoom: 15, //初始化地图级别
                    // resizeEnable: true,
                    // center: ['120.213971', '30.33931'], //初始化地图中心点位置
                    center:'',
                    ...mapOpts
                })

                // AMap.plugin('AMap.Geolocation', function() {
                    var geolocation = new AMap.Geolocation({
                        // 是否使用高精度定位，默认：true
                        enableHighAccuracy: true,
                        // 设置定位超时时间，默认：无穷大
                        timeout: 6000,
                        // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                        buttonOffset: new AMap.Pixel(10, 20),
                        //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                        zoomToAccuracy: true,     
                        //  定位按钮的排放位置,  RB表示右下
                        buttonPosition: 'RB',
                        useNative:true
                    })
                    that.geocoder = new AMap.Geocoder({
                        city: '010' // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
                    })
                    // console.log(geolocation)
                    //精确定位查询
                    // geolocation.on('complete',function(e){
                    //     console.log('精确定位查询1号')
                    //     // console.log('精确定位查询'+e)
                    //     // that.$toast.fail('精确定位查询成功');
                    //     that.$emit('accurateCode',[e.position.lng,e.position.lat])
                    //     //逆向地址解析
                    //     that.geocoder.getAddress([e.position.lng,e.position.lat], function(statusAddress, resultAddress) {
                    //         if (statusAddress === 'complete' && resultAddress.info === 'OK') {
                    //             // result为对应的地理位置详细信息
                    //             console.log(resultAddress)
                    //             that.$emit('address',resultAddress.regeocode.formattedAddress)
                    //             that.$nextTick(()=>{
                    //                 //设置圆形位置
                    //                 var centerC = new AMap.LngLat(e.position.lng,e.position.lat);
                    //                 // var centerC =  [result.position.lng,result.position.lat]
                    //                 that.map.setCenter(centerC); 
                    //                 //设置圆的半径大小
                    //                 var radiusC = 5 //单位:px
                    //                 //创建圆形点标记 CircleMarker 实例
                    //                 var circleMarker = new AMap.CircleMarker({
                    //                     center: centerC, //圆心
                    //                     radius: radiusC, //半径
                    //                     strokeColor: "white", //轮廓线颜色
                    //                     strokeWeight: 2, //轮廓线宽度
                    //                     strokeOpacity: 0.5, //轮廓线透明度
                    //                     fillColor: "#FF6900", //多边形填充颜色
                    //                     fillOpacity: 0.5, //多边形填充透明度
                    //                     zIndex: 10, //多边形覆盖物的叠加顺序
                    //                     cursor: "pointer", //鼠标悬停时的鼠标样式
                    //                 });
                    //                 //圆形 circleMarker 对象添加到 Map
                    //                 that.map.add(circleMarker);


                    //                 //设置圆形位置
                    //                 var center = new AMap.LngLat(e.position.lng,e.position.lat);
                    //                 //设置圆的半径大小
                    //                 var radius = 150;
                    //                 //创建圆形 Circle 实例
                    //                 var circle = new AMap.Circle({
                    //                     center: center, //圆心
                    //                     radius: radius, //半径
                    //                     borderWeight: 3, //描边的宽度
                    //                     strokeColor: "#FF6900", //轮廓线颜色
                    //                     // strokeOpacity: 1, //轮廓线透明度
                    //                     strokeWeight: 1, //轮廓线宽度
                    //                     fillOpacity: 0.2, //圆形填充透明度
                    //                     // strokeStyle: "dashed", //轮廓线样式
                    //                     // strokeDasharray: [10, 10],
                    //                     fillColor: "#1791fc", //圆形填充颜色
                    //                     // zIndex: 50, //圆形的叠加顺序
                    //                 });
                    //                 //圆形 Circle 对象添加到 Map
                    //                 that.map.add(circle);
                    //                 //根据覆盖物范围调整视野
                    //                 // this.map.setFitView([ circle ])
                    //             })
                    //         }
                    //     })
                    // })
                    // geolocation.on('fail',function(e){
                    //     console.log('精确定位查询')
                    //     this.$toast.fail('定位查询失败');
                    //     console.log(e)
                    // })

                    geolocation.getCurrentPosition(function(status, result) {
                        console.log(status);
                        if(status == 'error'){
                            // that.$toast.fail('定位查询失败');
                            that.$emit('accurateCode',['',''])
                            return false;
                        }
                        console.log(result);
                        console.log('精确定位查询2号')
                        that.$emit('accurateCode',[result.position.lng,result.position.lat])
                        console.log([result.position.lng,result.position.lat])
                        if(result.position.lng && result.position.lat){
                            //逆向地址解析
                            that.geocoder.getAddress([result.position.lng,result.position.lat], function(statusAddress, resultAddress) {
                                if (statusAddress === 'complete' && resultAddress.info === 'OK') {
                                    // result为对应的地理位置详细信息
                                    console.log(resultAddress)
                                    that.$emit('address',resultAddress.regeocode.formattedAddress)
                                }
                            })
                       
                            that.$nextTick(()=>{
                                //设置圆形位置
                                var centerC = new AMap.LngLat(result.position.lng,result.position.lat);
                                // var centerC =  [result.position.lng,result.position.lat]
                                that.map.setCenter(centerC); 
                                //设置圆的半径大小
                                var radiusC = 5 //单位:px
                                //创建圆形点标记 CircleMarker 实例
                                var circleMarker = new AMap.CircleMarker({
                                    center: centerC, //圆心
                                    radius: radiusC, //半径
                                    strokeColor: "white", //轮廓线颜色
                                    strokeWeight: 2, //轮廓线宽度
                                    strokeOpacity: 0.5, //轮廓线透明度
                                    fillColor: "#FF6900", //多边形填充颜色
                                    fillOpacity: 0.5, //多边形填充透明度
                                    zIndex: 10, //多边形覆盖物的叠加顺序
                                    cursor: "pointer", //鼠标悬停时的鼠标样式
                                });
                                //圆形 circleMarker 对象添加到 Map
                                that.map.add(circleMarker);


                                //设置圆形位置
                                var center = new AMap.LngLat(result.position.lng,result.position.lat);
                                //设置圆的半径大小
                                var radius = 150;
                                //创建圆形 Circle 实例
                                var circle = new AMap.Circle({
                                    center: center, //圆心
                                    radius: radius, //半径
                                    borderWeight: 3, //描边的宽度
                                    strokeColor: "#FF6900", //轮廓线颜色
                                    // strokeOpacity: 1, //轮廓线透明度
                                    strokeWeight: 1, //轮廓线宽度
                                    fillOpacity: 0.2, //圆形填充透明度
                                    // strokeStyle: "dashed", //轮廓线样式
                                    // strokeDasharray: [10, 10],
                                    fillColor: "#1791fc", //圆形填充颜色
                                    // zIndex: 50, //圆形的叠加顺序
                                });
                                //圆形 Circle 对象添加到 Map
                                that.map.add(circle);
                                //根据覆盖物范围调整视野
                                // this.map.setFitView([ circle ])
                            })
                        }
                    })
                    // 获取城市信息
                    // geolocation.getCityInfo(function(status, result) {
                        // console.log(status);
                        // console.log(result);
                        // console.log(result.position)
                        // that.$emit('roughCode',result.position)
                        // let center_LngLat = String(`${result.position[0]},${String(result.position[1])}`)
                        //  let center_LngLat = [result.position[0],result.position[1]]
                        
                    // })
                // })
            })
            .catch(e => {
                console.log(e)
            })
        },
    }
  }
  </script>
  
  <style lang="less" scoped>
  #container {
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 289px;
  }
  </style>
  
  